<template>
	<view>
		<view class="header"></view>
		<view class="content">
			<view class="proInfo">
				<view class="lable">项目联系人</view>
				<view class="lableinfo"><image src="../../../static/icon/gantan.png" mode=""></image>为保证项目联系人不被骚扰，将对项目联系人信息进行加密</view>
				<view class="projectContacts">
					<view class="name">{{data.projectContacts}}</view>
					<view class="phone" v-if="isPhone == 0" >
						<view class="phoneNum">{{data.contactsPhone1}}</view>
						<view class="ptext">获取联系方式</view>
					</view>
					<view class="phone" v-if="isPhone == 1">
						<view class="phoneNum">{{data.contactsPhone}} </view>
						<view><image src="../../../static/icon/phone.png" mode=""></image></view>
					</view>
				</view>
				<view class="address">
					<view class="name">项目地址</view>
					<view class="add">{{data.projectAddress}}</view>
				</view>
			</view>
			<view class="contract">
				<view class="maskla" v-if="isPhone != 1">
					<view class="suo"><image src="../../../static/icon/suo.png" mode=""></image></view>
					<view class="suotext">成功获取项目联系方式后自动解锁</view>
				</view>
				<view class="lable">上传投资合同<text class="textinfo">(不超过9张)</text></view>
				<view class="lableinfo"><image src="../../../static/icon/gantan.png" mode=""></image>上传合同作为资料备份，更是在石榴红了中展示您的权益</view>
				<view class="upfile">
					<uni-file-picker 
					    v-model="imageValue"  
					    file-mediatype="image"
					    mode="grid"
					    file-extname="png,jpg"
					    :limit="9"
					 
					    @select="select"
					/>
				</view>
				
			</view>
			<view class="submit">
				
				 <button type="warn" @click="submit()">提交</button>
			</view>
			<view class="fawu">
				<view class="lable">法务服务</view>
				<view class="fawuinfo">
					暂未开通
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid:'',
				isPhone:'1',
				imageValue:[],
				data:{},
				token:'',
				qiniuaddr: this.QiniuUrl,
				formData:{
					pid:'',
					uid:'',
					contractFile:[],
					status:'0',
				},
				userData:[]
			}
		},
		onLoad(e) {
			this.pid = e.pid
			// console.log('1111',e)
			//获取用户信息
			let user = uni.getStorageSync('userData');
			// // console.log('1111----',user)
			// if(!uni.getStorageSync('userData')){
			// 	this.userinfo = true
			// }
			this.project()
			this.QiniuToken();
			this.userData = user;
			// this.userInfo()
		},
		methods: {
			QiniuToken(){
				// console.log('url',this.HttpServe+'/Welcome/QiniuToken',)
				const token = uni.request({
					url: this.HttpServe+'/Welcome/QiniuToken',
					method: 'post',
					success: (res) => {
						// console.log('1-----------',res);
						this.token = res.data.data;
					}
				})
				// console.log('111111',token)
			},
			//获取项目信息
			async project(){
				//我创建的
				const project1 = await this.GQL({
						"operationName": "allSlProjects",
						"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter: $filter) { nodes { title contactsPhone contactsWx contentInfo projectAddress projectContacts type } } }",
						"variables": {"filter": {"status": {"equalTo": "1"},"pid":{"equalTo":this.pid}}}
				})
				if(project1){
					project1.data.allSlProjects.nodes.forEach(function (item, index) {
						
						item.contactsPhone1	= item.contactsPhone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
					
					});
					// console.log('‘111',project1)
					this.data = project1.data.allSlProjects.nodes[0]
				}
			}, 
			// 获取上传状态
			select(e){
				console.log('选择文件：',e)
				let data = e.tempFiles
				// data.forEach(item=>{
				this.upload(data)
			},
			upload(imgPath){
			    let _this = this
				var time = new Date().getTime();
				imgPath.forEach(function(item,index,array){
					const filename = 'yssl/contractFile/'+time+item.cloudPath;
					// console.log('11111111111',filename)
					uni.uploadFile({
					   url: 'http://upload-z2.qiniup.com',  
					   name: 'file',
					   filePath: item.path,
					   header: {
					     "Content-Type": "multipart/form-data"
					   },
					  formData: {
					    token: _this.token, //后端返回的token
						key: filename,
					  },
					  success: function(res) {
						let key = JSON.parse(res.data).key;
					     _this.formData.contractFile[index] = _this.qiniuaddr +"/" +key;
						 // console.log('111',_this.formData.contractFile)
					  },
					  fail: function(res) {
					     console.log(res)
					  }
					});
				 })
				
				 // console.log('111',_this.formData.files)
			    
			},
			//提交信息
			async submit(){
				let  files = JSON.stringify(this.formData.contractFile)
				const contract = await this.GQL({
						"operationName": "createSlProjectContract",
						"query": "mutation createSlProjectContract($input: CreateSlProjectContractInput!) { createSlProjectContract(input: $input) { slProjectContract { id } } }",
						"variables": {"input": {"slProjectContract":{"uid":this.userData.uid,"pid":this.pid,"status":'0','contractFile':files }}}
				})
				console.log('11------',contract)
				if(contract.data.createSlProjectContract.slProjectContract){
					uni.showToast({ title: '提交成功', icon: 'success', duration: 30000 });
					uni.reLaunch({
						url:"/pages/user/index"
					});
				}else{
					uni.showToast({ title: '提交失败', icon: 'error', duration: 3000 });
				}	
			}
			
		
		}
	}
</script>

<style lang="scss">
	.header{
		width: 100%;
		height: 200px;
		/* color: #FFFFFF; */
		background: linear-gradient(#C7171E, #f0f2f5); /* 标准的语法 */
	}
	.content{
		margin: 15px;
		
		position: relative;
		top: -200px;
			height: 100%;
	}
	.proInfo,.contract{
		background-color: #FFFFFF;
		border-radius: 5px;
		// height: 220px;
		padding: 28px 16px ;
		.lable{
			// padding: 20px 10px 10px 10px;
			font-size: 18px;
			font-weight: 600;
			color: #161E3E;
			line-height: 16px;
		}
		.lableinfo{
			margin-top: 14px;
			font-size: 12px;
			font-weight: 400;
			color: #9BA7C1;
			line-height: 12px;
			image{
				padding-right: 5px;
				height: 10px;
				width: 10px;
			}
		}
	}
	.address{
		.add{
			font-size: 15px;
			font-weight: 400;
			color: #767B8D;
			line-height: 16px;
		}
	
	}
	.projectContacts,.address{
		margin: 10px;
		height: 50px;
		.name{
			font-size: 15px;
			font-weight: 400;
			color: #161E3E;
			line-height: 16px;
			margin: 46px 0px 14px 0px;
		}
		.add{
			color: #767B8D;
		}
		.phone{
			position: absolute;
			width: 100%;
			
			image{
				position: absolute;
				right: 40px;
				margin-left: 80px;
				width: 30px;
				height: 30px;
			}
			.phoneNum{
				position: absolute;
				font-size: 15px;
				font-weight: 400;
				color: #767B8D;
				line-height: 16px;
				margin-top: 10px;
			}
			
			.ptext{
				position: absolute;
				right: 20px;
				background-color: #C7171E;
				color: #FFFFFF;
				font-size: 15px;
				border-radius: 5px;
				padding: 10px;
			}
		}
	}
	.contract{
		margin-top: 20px;
		padding-bottom: 20px;
		height: 100%;
		.textinfo{
			font-size: 11px;
			color: #9BA7C1;
			line-height: 12px;
		}
		.upfile{
			margin: 10px;
		}
	}
	.maskla{
		 position: absolute;
		 
		 z-index: 1;
		 width: 100%;
		 height: 200px;
		 border-radius: 5px;
		 background-color: rgba(0, 0, 0, 0.5);
		 .suo{
			 height: 130px;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 text-align: center;
			 image{
				 width: 50px;
				 height: 50px;
			 }
		 }
		 .suotext{
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 text-align: center;
			font-size: 15px;
			font-weight: 400;
			color: #FBFCFE;
			line-height: 16px;
		 }
		 
	}
	.porjectText{
		margin-top: 15px;
		background-color: #FFFFFF;
	}
	.fawu{
		margin: 20px 0px;
		.label{
			font-size: 18px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #161E3E;
			line-height: 16px;
		}
		.fawuinfo{
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #767B8D;
			line-height: 24px;
			align-items: center;
			color: #767B8D ;
		}
	}
	
</style>
